<template>
	<div id="audition_enroll" class="dialog animated"  :class="open? 'fadeIn':'fadeOut'"
		 v-show="show" :style="{visibility:(visible?'visible':'hidden')}">
		<div class="panel animated" :class="open? 'zoomIn':''">
			
			<choose v-show="step==1" ref="choose" @ok="chooseOk" @cancel="cancel"></choose>
			<success v-show="step==2" ref="success" @ok="successOk"></success>
		</div>
	</div>
</template>

<script>
	
import choose from './audition_enroll_choose'
import success from './audition_enroll_success'

var vm;
export default {
	components : {
		choose,success
	},
	data : function() {
		return {
			show : false,
			open : false,
			visible : false,
			step : 1,
			audition : null
		}
	},
	methods : {
		init : function(audition) {
			
			vm.show = true;
			setTimeout(function() { 
				vm.open = true; 
				vm.visible = true;
			},1);
			
			vm.step = 1;
			vm.audition = audition;
			
			vm.$refs.choose.init(audition);
		},
		cancel : function() {
			//隐藏弹窗
			vm.open = false;
			setTimeout(function() {
				vm.show = false;
				vm.visible = false;
				vm.step = 0;
			},500);
		},
		chooseOk : function(syllabus, countList) {
			vm.step = 2;
			vm.$refs.success.init(syllabus,countList);
			vm.$emit('callback');
		},
		successOk : function() {
			vm.cancel();
		}
		
	},
	created : function() {
		vm = this;
	}
}
</script>
<style lang="scss">
	#audition_enroll {
		.el-input__inner {
			border-radius: 0.1rem;
			font-size: 0.16rem;
			color: #666666;
			height: 0.36rem;
			line-height: 0.36rem;
		}
		.el-input__icon {
			line-height: 0.36rem;
		}
	}
</style>
<style scoped src="@/style/module/dialog.css"></style>
<style scoped>
	.panel {
		margin-top: 0.6rem;
		width: 10.5rem;
	}
</style>